<template>
  <div class="choose-seat">
    <van-nav-bar title="选座" fixed placeholder @click-left="onClickLeft">
      <template #left
        ><van-icon name="arrow-left" color="#323233" size="1.5rem"
      /></template>
    </van-nav-bar>

    <div class="seat-container" v-if="seatArray.length">
      <div class="row-number-container">
        <div v-for="n in seatRow" :key="n" class="row-number">{{ n }}</div>
      </div>

      <div class="center-line"></div>
      <div v-for="(row, index) in seatRow" :key="index" class="seat-row">
        <div
          v-for="(col, index) in seatCol"
          :key="index"
          :class="[
            seatArray[row - 1][col - 1].status === -1
              ? 'bought'
              : seatArray[row - 1][col - 1].status === 0
              ? 'unselected'
              : 'selected',
            'seat',
          ]"
          @click="toggleSeat(row - 1, col - 1)"
        ></div>
      </div>
    </div>

    <!-- legend:图例 -->
    <div class="legend">
      <div>
        <div class="unselected"></div>
        <span>可选&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <div class="selected"></div>
        <span>已选&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <div class="bought"></div>
        <span>不可选</span>
      </div>
    </div>

    <!-- 底部区域 -->
    <div class="bottom-container">
      <div class="info-ticket">
        <div class="notice">
          <van-notice-bar
            color="#666666"
            background="transparent"
            mode="link"
            @click="showNotice()"
          >
            1.3米及以上儿童观影须要购票，1.3米以下儿童无座，1位成人可携带一名儿童。为配合政府防疫要求，进入影城和观影时请您佩戴口罩！观看3D/IMAX影片时，请您自带3D眼镜或到影城购买！
          </van-notice-bar>
        </div>
        <div class="info">
          <div class="title" >{{this.movieInfo}}</div>
          <div class="time">今天 {{this.showTime}}
            &nbsp;&nbsp;&nbsp;<span>{{this.hallName}}</span>
          </div>
        </div>
        <div v-show="buySeat.length" class="ticket-container">
          <van-badge
            v-for="(p, i) in buySeatPos"
            :key="p"
            content="x"
            color="#79BD90"
            @click.native="removeTicket(i)"
          >
            <div class="ticket">
              <div class="ticket-number">
                {{ p.split("-")[0] + "排" + p.split("-")[1] + "座" }}
              </div>
              <div class="ticket-price">￥36.9</div>
            </div>
          </van-badge>
        </div>
      </div>
      <div class="button-container">
        <van-button
          :disabled="!buySeat.length"
          round
          color="#79BD90"
          type="primary"
          size="large"
          >{{ buttonText }}</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";
import { Dialog } from "vant";
export default {
  components: {
    [Notify.Component.name]: Notify.Component,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      //座位状态：0为可选，1为已选，-1为已购（被别人购买，不可选）
      seatArray: [],
      //座位行数
      seatRow: 11,
      // 座位列数
      seatCol: 12,
      //当前选座数量
      currentChooseNum: 0,
      //最大选座数量（黄牛biss）
      maxChooseNum: 6,
      //已购座位，每个元素为字符串
      boughtSeat: [],
      //选购座位，每个元素为数字
      buySeat: [],
      //选购座位的位置，每个元素为字符串
      buySeatPos: [],
      //票价
      ticketPrice: 36.9,



      movieName: this.$route.query.movieName,
      showTime: this.$route.query.showTime,
      hallName: this.$route.query.hallName,
      price: this.$route.query.price,
      movieInfo:''

    };
  },
  computed: {
    buttonText() {
      return (
        "￥" + (this.buySeat.length * this.ticketPrice).toFixed(2) + "确认选座"
      );
    },
  },
  methods: {
    //点击票据要做的操作 刷新相应的座位
    removeTicket(i) {
      let row = this.buySeatPos[i].split("-")[0] - 1;
      let col = this.buySeatPos[i].split("-")[1] - 1;
      this.seatArray[row][col].status = 0;
      this.buySeat.splice(i, 1);
      this.buySeatPos.splice(i, 1);
      console.log("remove");
      console.log(this.buySeat);
      console.log(this.buySeatPos);
    },
    onClickLeft() {
      //返回上一页
      this.$router.go(-1);
    },
    showNotice() {
      Dialog.alert({
        title: "温馨提示",
        message:
          " 1.3米及以上儿童观影须要购票，1.3米以下儿童无座，1位成人可携带一名儿童。为配合政府防疫要求，进入影城和观影时请您佩戴口罩！观看3D/IMAX影片时，请您自带3D眼镜或到影城购买！",
        confirmButtonColor: "#4B9E67",
      }).then(() => {
        //  close
      });
    },
    //初始化座位
    initSeatArray() {
      let count = 0;
      for (let i = 0; i < this.seatRow; i++) {
        this.seatArray.push([]);
        for (let j = 0; j < this.seatCol; j++) {
          count++;
          // status为座位状态，id范围为1-座位上限（132）
          this.seatArray[i].push({ id: count, status: 0 });
        }
      }
    },

    //获取后端传来的已购座位信息
    getMessage() {
      let url = "http://10.36.4.254:20003/orders/order/seat-info?scheduleId=1";
      this.axios
        .get(url)
        .then((res) => {
          //如果有已购座位再处理
          if (res.data.message) {
            this.boughtSeat = res.data.message.split(",");
            //对后端传过来的数据排序
            this.boughtSeat = this.boughtSeat.sort((a, b) => b - a);
            console.log(this.boughtSeat);
            this.showBoughtSeat();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //显示已购座位
    showBoughtSeat() {
      for (let i = 0; i < this.seatRow; i++) {
        for (let j = 0; j < this.seatCol; j++) {
          if (this.seatArray[i][j].id == this.boughtSeat.at(-1)) {
            this.boughtSeat.pop();
            this.seatArray[i][j].status = -1;
          }
        }
      }
    },

    //点击切换座位的状态
    toggleSeat(row, col) {
      const seatStatus = this.seatArray[row][col].status;
      let tempArray = this.seatArray;
      switch (seatStatus) {
        //未/可选，点击变已选
        case 0:
          if (this.buySeat.length === this.maxChooseNum) {
            Notify({
              color: "#FFFFFF",
              background: "#79BD90",
              message: "最多只能能选6座哦",
            });

            return;
          }
          tempArray[row][col].status = 1;
          this.buySeat.push(tempArray[row][col].id);
          this.buySeatPos.push(`${row + 1}-${col + 1}`);
          console.log(this.buySeatPos);
          break;
        //已选，点击变未/可选
        case 1:
          tempArray[row][col].status = 0;
          this.buySeat.forEach((v, i, a) => {
            if (v === tempArray[row][col].id) {
              //删除buySeat中的id
              a.splice(i, 1);
              //删除buySeatPos中的位置
              this.buySeatPos.splice(i, 1);
              console.log(this.buySeatPos);
            }
          });
          break;
        //想酒吧点炒饭？
        case -1:
          return;
      }
      //vue无法检测数组中的某一项更新，必须用slice复制一个新数组返回
      this.seatArray = tempArray.slice();
      console.log(this.buySeat);
    },
  },
  mounted(){
    this.axios
      .get(`http://10.36.4.254:8080/select/FilmInfoById?id=${this.movieName}`)
      .then((res) => {
        console.log(res);
        this.movieInfo = res.data.data.name;
      });
  },
  beforeMount() {
    this.initSeatArray();
    this.getMessage();
  },
};
</script>

<style lang="scss" scoped>
.choose-seat {
  position: relative;
  background-color: #f6f6f6;
}
.legend {
  margin-top: 5vw;
  display: flex;
  justify-content: center;
}
.legend > div {
  box-sizing: border-box;
  padding: 0 1.5vw;
  display: flex;
  font-size: 3.37vw;
  height: 6.5vw;
  align-items: center;
  // border-bottom: 1px solid purple;
}
.legend div[class] {
  width: 5vw;
  height: 5vw;
}
.legend span {
  margin-left: 1vw;
}

.seat-size-6vw {
  width: 6vw;
  height: 6vw;
}
.unselected {
  background: url("./../assets/unselected.png") center center no-repeat;
  background-size: 100% 100%;
}
.selected {
  background: url("./../assets/selected.png") center center no-repeat;
  background-size: 100% 100%;
}
.bought {
  background: url("./../assets/bought.png") center center no-repeat;
  background-size: 100% 100%;
}
.seat-container {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 5vw;
  background-color: #f3fbf6;
  overflow: auto;
}
.seat-row {
  display: flex;
}
.seat {
  width: 6vw;
  height: 6vw;
  margin: 0.5vw;
}
.center-line {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  border-left: 0.2vw dashed #919191;
}
.row-number-container {
  display: flex;
  flex-flow: column nowrap;
  position: absolute;
  align-items: center;
  left: 2.5vw;
  // background-color: #bebebe;
}
.row-number {
  color: #4b9e67;
  font-size: 3vw;
  line-height: 6vw;
  margin: 0.5vw 0;
}

.bottom-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: center;
  height: 67vw;
  // height: 37.6vh;
  box-sizing: border-box;
  width: 100%;
  font-size: 3.8vw;
  // background-color: rgb(167, 218, 255);
  padding: 2vw;
}
.notice {
  width: 100%;
  border-bottom: 1px solid #d2eddb;
  margin-bottom: 1vw;
}
.info-ticket {
  width: 100%;
  // height: 21vh;
  border-radius: 8px;
  padding: 2vw 0;
  background-color: #ffffff;
}
.info {
  padding-left: 3vw;
  padding-right: 3vw;
  padding-bottom: 2vw;
}
.title {
  font-size: 4vw;
  font-weight: 600;
}
.time {
  margin-top: 1vw;
  color: #666666;
}
.ticket-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: scroll;
  padding: 3vw 0;
  height: 20vw;
  box-sizing: border-box;
  border-top: 1px solid #d2eddb;
  // background-color: pink;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.ticket {
  width: 17vw;
  height: 11vw;
  padding: 1vw;
  margin-left: 3vw;
  border-radius: 5px;
  text-align: center;
  background-color: #f6f6f6;
}
.button-container {
  width: 95vw;
  margin-top: 2vw;
}
</style>
<style>
/* 顶部导航中央文字 */
.choose-seat .van-nav-bar__title {
  font-size: 1rem;
  font-weight: 700;
}
.choose-seat .van-notice-bar {
  padding: 0 3vw;
}
</style>